<template>
  <div class="loading_ui_box" v-show="isVisible" :style="{ background:rgba }">
     <div class="spinner_box">
        <i class="fa fa-spinner fa-pulse"></i>
        <p>{{text}}</p>
    </div>  
  </div>
</template>

<script>
export default {
  name: 'Loading_UI',
  props: {
      text : {
        type : String,
        default : '正在处理中...'
      }
  },
  data(){
    return {
      isVisible : true,
      rgba : "rgba(0,0,0,0)"
    }  
  },
  mounted(){
      
  },
  methods: {
      
  }
}
</script>

<style lang="stylus" scoped>
.loading_ui_box {
    position absolute
    left 0px
    right 0px
    top 0px
    bottom 0px
    background rgba(0,0,0,0.1)
    z-index 99999999    
}

.spinner_box {
    width 120px
    height 120px
    background rgba(0,0,0,0.5)
    position absolute
    top 50%
    left 50%
    border-radius 5px
    margin-left -60px
    margin-top -110px
    text-align center

    i {
        font-size 36px
        color #fff
        margin-top 28px
        margin-bottom 13px
    }

    p {
        color #fff
        font-size 14px
        letter-spacing 1px
        font-weight 300
    }
}
</style>
